<template>
  <div class="monitorBox">
    <div class="monitor">
      <checked-title title="监控列表">
        <template #right>
          <p class="zongshu">在线：{{ total }}台</p>
        </template>
      </checked-title>
      <!-- 视频 -->
      <ul class="videoUl flex flex-wrap">
        <li class="videoItem" v-for="(item, index) in videoList" :key="item.siteNumber" @click="videoListClick(item)">
          <div class="jynVideo">
            <div :id="'jynPlayer' + item.siteNumber" class="video"></div>
            <div class="cover-picture" v-if="item.display">
              <img :src="item.img" alt="">
            </div>
          </div>
          <p class="pointer">{{ item.name }}</p>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="videopage flex flex-center">
        <el-pagination @size-change="pageChange" layout="total, prev, pager, next, jumper" :page-size="pageSize"
          :total="total" :page-count="3" @current-change="pageChange">
        </el-pagination>
      </div>

      <MonitoringPopup ref="videoPopup"></MonitoringPopup>
    </div>
  </div>
</template>
<script>
import EZUIKit from 'ezuikit-js' //萤石云
import MonitoringPopup from '../monitoringPopup.vue'
import { getViDeviceList } from '@/api/index.js' //api
let jynPlayer0 = null,
  jynPlayer1 = null,
  jynPlayer2 = null,
  jynPlayer3 = null,
  jynPlayer4 = null,
  jynPlayer5 = null;
export default {
  components: {
    MonitoringPopup,
  },
  props: {
    pageType: {
      type: Number,
      default: 1,
    }, //页面类型
  },
  data() {
    return {
      imgbg: require('../../assets/images/videoimg.png'),
      pageNo: 1, //当前也
      pageSize: 6, //每页条数
      total: 0, //视频总数
      videoList: [], //监控列表
      isLastPage: false, //是否最后一页
      videoData: {},
    }
  },
  mounted() {
    this.getList()
  },
  beforeDestroy() {
    let arr = []
    if (this.isLastPage) {
      arr = this.videoList.length
    } else {
      arr = this.pageSize
    }
    for (let index = 0; index < arr; index++) {
      this.jynCreatePlayer2(index)
    }
  },
  methods: {
    //分页
    pageChange(e) {
      this.pageNo = e
      this.getList()
    },
    //监控列表
    getList() {
      var data = {
        type: this.pageType,
        state: 1,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      getViDeviceList(data)
        .then((res) => {
          this.total = res.data.totalRows

          this.videoList = []
          this.$nextTick(() => {
            if (this.videoList.length > 1) {
              for (let index = 0; index < this.videoList.length; index++) {
                this.jynCreatePlayer2(index);
              }
            }
            let data = res.data.rows;
            data.forEach((item) => {
              item.display = false;
              this.videoList.push(item)
            })
            if (res.data.rows.length > 0) {
              res.data.rows.forEach((element, index) => {
                this.jynCreatePlayer('jynPlayer' + element.siteNumber, index, element.token, element.voiceUrl)
              })
            }
          })
        })
        .catch((err) => {
        })
    },
    //初始化视频
    initplayer(id, i, token, url) {
      let imgbg = this.imgbg
      return new EZUIKit.EZUIKitPlayer({
        id: id, // 视频容器ID
        accessToken: token,
        url: url, //视频地址
        autoplay: false, //是否自动播放
        template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // footer:
        // poster:imgbg,//极简版才可用
        audio: 0, //是否默认开启声音 1：打开（默认） 0：关闭
        width: 210,
        height: 172,
        handleSuccess: (e) => {
        },
        handleError: (e) => {
          this.videoList[i].display = true;
        }
        // footer:['fullScreen']
      })
    },
    //点击监控对应地图
    videoListClick(item) {
      this.$refs.videoPopup.open(item)
    },
    //分页切换初始化视频
    jynCreatePlayer(id, i, token, url) {
      switch (i) {
        case 0:
          // this.jynPlayer0 = new EZUIPlayer(id);
          jynPlayer0 = this.initplayer(id, i, token, url)
          break
        case 1:
          jynPlayer1 = this.initplayer(id, i, token, url)
          break
        case 2:
          jynPlayer2 = this.initplayer(id, i, token, url)
          break
        case 3:
          jynPlayer3 = this.initplayer(id, i, token, url)
          break
        case 4:
          jynPlayer4 = this.initplayer(id, i, token, url)
          break
        case 5:
          jynPlayer5 = this.initplayer(id, i, token, url)
          break
        default:
          break
      }
    },
    //分页切换清除视频
    jynCreatePlayer2(i) {
      switch (i) {
        case 0:
          this.clearplayer(jynPlayer0, i)
          break
        case 1:
          this.clearplayer(jynPlayer1, i)
          break
        case 2:
          this.clearplayer(jynPlayer2, i)
          break
        case 3:
          this.clearplayer(jynPlayer3, i)
          break
        case 4:
          this.clearplayer(jynPlayer4, i)
          break
        case 5:
          this.clearplayer(jynPlayer5, i)
          break
        default:
          break
      }
    },

    //清除视频
    clearplayer(obj, i) {
      obj.stop();
      obj.destroy();
      // 其他版本
      // obj.hls = null;
      // obj.opt.currentSource = null;
      // obj.opt.sources = null;
      // obj.opt = null;
      // obj.video = null;
      // obj.videoId = "";
      // 简易版
      obj.hls = null
      obj.url = ''
      obj.id = null
      switch (i) {
        case 0:
          jynPlayer0 = null;
          break
        case 1:
          jynPlayer1 = null;
          break
        case 2:
          jynPlayer2 = null;
          break
        case 3:
          jynPlayer3 = null;
          break
        case 4:
          jynPlayer4 = null;
          break
        case 5:
          jynPlayer5 = null;
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="less" scope>
.monitorBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.monitor {
  width: 100%;
  height: 100%;
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // height: 0;
  .zongshu {
    font-size: 1.6rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #3cffff;
    margin-top: -8.5rem;
    margin-left: 35rem;
  }

  .videoUl {
    // flex: 1;
    overflow: hidden;
    justify-content: center;
    // margin-top: 1.5rem;

    .videoItem {
      cursor: pointer;
      width: 21rem;
      margin-top: 2rem;
      margin-right: 3%;
      // text-align: center;
      // overflow: hidden;
      border: 1px dashed rgba(33, 158, 255, 0.6);
      box-shadow: 0px 0px 2.9rem 0.2rem #1442ac;
      padding-bottom: 2rem;
      // opacity: 0.8;

      .video {
        width: 100%;
        height: 18rem;
      }

      p {
        font-size: 1.6rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #feffff;
        margin-top: 0.8rem;
        text-align: center;
        margin-top: 1.7rem;
      }

      .jynVideo {
        position: relative;

        .cover-picture {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1002;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .videoItem:nth-child(2n + 2) {
      margin-right: 0;
    }
  }

  // .el-pagination button:disabled{
  //     background: none;
  //     color: #FFFFFF;
  // }
  .videopage {
    margin-top: 1rem;
  }

  .el-pager li {
    background: none;
    color: #ffffff;
  }

  .el-pager li.active {
    color: #409eff !important;
  }

  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    background: none;
  }

  .el-pagination .btn-next .el-icon,
  .el-pagination .btn-prev .el-icon {
    color: #ffffff;
  }
}
</style>
